<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--列表-->
        <el-table :data="dataList" highlight-current-row v-loading="listLoading"
                  @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="username" label="姓名" width="120" sortable>
            </el-table-column>
            <el-table-column prop="state" label="性别" width="100" :formatter="formatSex" sortable>
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="100" sortable>
            </el-table-column>
            <el-table-column prop="birth" label="生日" width="120" sortable>
            </el-table-column>
            <el-table-column prop="addr" label="地址" min-width="180" sortable>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove"
                       :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next"
                           background
                           @current-change="handleCurrentChange"
                           :page-size="pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-col>


        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="date" label="日期" width="150"></el-table-column>
                <el-table-column property="name" label="姓名" width="200"></el-table-column>
                <el-table-column property="address" label="地址"></el-table-column>
            </el-table>
        </el-dialog>

        <!-- Form -->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="employee">
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="employee.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="employee.password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitFormData">确 定</el-button>
            </div>
        </el-dialog>

    </section>
</template>

<script>
    export default {
        data(){
            return {
                dataList:[],
                listLoading:false,//加载的动态效果
                sels:[],
                pageSize:5,
                total:0,
                currentPage:1,
                filters:{
                    name:''
                },
                dialogFormVisible:false,//默认隐藏弹出框
                formLabelWidth:"120px",
                employee:{
                    username:'',
                    password:''

                }

            }
        },
        methods:{
            selsChange(sels){
                this.sels=sels;
            },
            formatSex(row, column){
                return '未知';
            },
            handleEdit(index,row){
                //回显数据
                this.employee = Object.assign({}, row);
                //打开弹出框
                this.dialogFormVisible=true;
            },
            handleDel(index,row){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                   this.$http.delete("/employee/"+row.id).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        if(res.data.success){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        }else {
                            this.$message.error('网络异常');
                        }
                        this.loadListData();
                    });
                }).catch(() => {

                });
            },
            loadListData(){//加载页码数据
                let param={
                    currentPage:this.currentPage,
                    pageSize:this.pageSize,
                    keywords:this.filters.name
                }

                this.$http.post("/employee",param).then(res=>{
                    console.debug(res)
                    this.dataList=res.data.rows;
                    this.total=res.data.tatal;
                })
            },
            //批量删除
            batchRemove(){

            },
            //分页的方法
            handleCurrentChange(val){
                this.currentPage=val;
                this.loadListData();
            },
            search(){
                this.loadListData();
            },
            handleAdd(){
                //弹出框清空
                this.employee={
                    username:'',
                    password:''

                }

                //打开弹出框
                this.dialogFormVisible=true;

            },
            submitFormData(){//提交数据的方法

                this.$http.put("/employee",this.employee).then(res=>{
                    let {success,message}=res.data;
                    if(success){
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }else {
                        this.$message.error('网络异常');
                    }
                    this.dialogFormVisible=false;
                    this.loadListData();

                })

            }
        },
        mounted(){
            this.loadListData();

        }


    }

</script>

<style scoped>

</style>